<script>
import { loadAdminChoose } from '@/api/admin/choose'

export default {
  data() {
    return {
      total: 0,
      params: {
        pageNo: 1,
        pageSize: 10,
        courseName: '',
        major: '',
        className: '',
      },
      list: [],
    }
  },
  methods: {
    async initChooseData() {
      const { total, list } = await loadAdminChoose(this.params)
      this.total = total
      this.list = list
    },
  },
  created() {
    this.initChooseData()
  },
}
</script>
<template>
  <el-card>
    <template #header>选课信息管理</template>
    <div class="nav-bar">
      <div class="search">
        <el-input size="small" placeholder="专业名" clearable v-model="params.major"></el-input>
        <el-input size="small" placeholder="班级名" clearable v-model="params.className"></el-input>
        <el-input
          size="small"
          placeholder="课程名"
          clearable
          v-model="params.courseName"
        ></el-input>
        <el-button size="small" type="primary" @click="initChooseData">
          <template #icon>
            <el-icon><EpSearch /></el-icon>
          </template>
          <span>查询</span>
        </el-button>
      </div>
    </div>
    <el-table border stripe size="small" :data="list">
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
      <el-table-column label="序号" type="index" width="60"></el-table-column>
      <el-table-column label="课程名称" prop="course_name"></el-table-column>
      <el-table-column label="学生名称" prop="student_name"></el-table-column>
      <el-table-column label="学生班级" prop="class_name"></el-table-column>
      <el-table-column label="日常分" #default="{ row }" width="70">
        <el-tag v-if="row.sc_daily_score >= 80" type="success" size="small" effect="dark">
          {{ row.sc_daily_score }}
        </el-tag>
        <el-tag v-else-if="row.sc_daily_score >= 60" type="warning" size="small" effect="dark">
          {{ row.sc_daily_score }}
        </el-tag>
        <el-tag v-else type="danger" size="small" effect="dark">
          {{ row.sc_daily_score }}
        </el-tag>
      </el-table-column>
      <el-table-column label="期末分" #default="{ row }" width="70">
        <el-tag v-if="row.sc_exam_score >= 80" type="success" size="small" effect="dark">
          {{ row.sc_exam_score }}
        </el-tag>
        <el-tag v-else-if="row.sc_exam_score >= 60" type="warning" size="small" effect="dark">
          {{ row.sc_exam_score }}
        </el-tag>
        <el-tag v-else type="danger" size="small" effect="dark">
          {{ row.sc_exam_score }}
        </el-tag>
      </el-table-column>
      <el-table-column label="总分" #default="{ row }" width="70">
        <el-tag v-if="row.sc_score >= 80" type="success" size="small" effect="dark">
          {{ row.sc_score }}
        </el-tag>
        <el-tag v-else-if="row.sc_score >= 60" type="warning" size="small" effect="dark">
          {{ row.sc_score }}
        </el-tag>
        <el-tag v-else type="danger" size="small" effect="dark">
          {{ row.sc_score }}
        </el-tag>
      </el-table-column>
    </el-table>
    <el-pagination
      size="small"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[5, 10, 20, 30, 40, 50]"
      :total="total"
      v-model:current-page="params.pageNo"
      v-model:page-size="params.pageSize"
      @change="initChooseData"
    />
  </el-card>
</template>

<style scoped>
.nav-bar {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-bottom: 14px;
}
.nav-bar .el-input {
  width: 180px;
  margin-right: 10px;
}
.el-pagination {
  margin-top: 14px;
  justify-content: center;
}
</style>
